<template>
  <oce-drawer :visible.sync="showDrawer" :size="size">
    <oce-form :column="formColumn" :option="option" v-model="form"> </oce-form>
  </oce-drawer>
</template>

<script>
/**
 * 将表单嵌入抽屉组件中，方便使用。
 */
export default {
  name: 'OceFormDrawer',
  data() {
    return {
      showDrawer: false,
      form: {},
      formCreate: false,
    }
  },
  props: {
    /**
     * 组件配置属性，详情见下面Option属性
     */
    option: {
      type: Object,
    },
    /**
     * 表单项配置，继承form组件column属性所有字段，独有属性详情见下面Column属性
     */
    column: {
      type: Array,
    },
    /**
     * 是否显示 Drawer，支持 .sync 修饰符
     */
    visible: {
      type: Boolean,
      default: false,
    },
    /**
     * Drawer 窗体的大小,不带单位传啥是啥
     */
    size: {
      type: String,
      default: '40%',
    },
  },
  computed: {
    formColumn: function () {
      if (!this.column) return []
      let form = this.$ocean.deepClone(this.column)
      // console.log(1, form)
      form.map((item) => {
        item.span = 24
      })
      // console.log(2, form)
      return form || []
    },
  },
  watch: {
    showDrawer(val) {
      /**
       * .sync语法糖
       * @property {Boolean}
       */
      this.$emit('update:visible', val)
    },
    visible(val) {
      this.showDrawer = val
    },
    form: {
      handler(val) {
        if (this.formCreate) this.setVal()
      },
      deep: true,
    },
  },
  created() {
    this.showDrawer = this.visible
    this.$nextTick(() => {
      this.setVal()
      this.formCreate = true
    })
  },
  methods: {
    setVal() {
      /**
       * v-mode
       * @property {Object}
       */
      this.$emit('input', this.form)
      /**
       * v-mode
       * @property {Object}
       */
      this.$emit('change', this.form)
    },
  },
}
</script>

<style lang="scss" scoped></style>
